window.addEventListener("load", function () {
	// 头部tab栏
	tab("header ul li", "active");
	// 首页轮播图
	var mySwiper = new Swiper(".swiper", {
		autoplay: true, //可选选项，自动滑动
		pagination: {
			el: ".swiper-pagination",
			clickable: true,
		},
	});
	// 返回顶部
	toTop("#toTop");
	//云服务动态渲染
	//声明变量接收html结构
	let servicehtml = "";
	// 创造数据源
	let serviceData = [
		{
			imgUrl: "../imgs/service01.svg",
			title: "API私有化服务",
			info: "可部署本地&专有云的Web API",
		},
		{
			imgUrl: "../imgs/service02.svg",
			title: "源码云监测",
			info: "实时代码托管、威胁情报监控",
		},
		{
			imgUrl: "../imgs/service03.svg",
			title: "源码有赢",
			info: "一站式营销活动服务平台",
		},
		{
			imgUrl: "../imgs/service04.svg",
			title: "YuanMa API",
			info: "API开发者协作平台",
		},
	];
	// 动态渲染数据
	serviceData.forEach(function (v) {
		servicehtml += `<li class="fl b-sh">
		<img src="${v.imgUrl}" alt="" />
		<h4 class="pl20r20 font20 fnormal">${v.title}</h4>
		<p class="font14 pl20r20 c6 mt10b25">
		${v.info}
		</p>
		<a href="#" class="font14 c127 pl20r20">去搜索</a>
		</li>`;
	});
	// 加数据拼接到指定位置
	const serveiceNode = document.querySelector("#serviceData");
	serveiceNode.innerHTML = servicehtml;

	// api动态渲染数据
	//声明变量接收html结构
	let apihtml = "";
	// 声明数据源
	let apiData = [
		{
			imgUrl: "../imgs/api01.svg",
			title: "生活服务",
		},
		{
			imgUrl: "../imgs/api02.svg",
			title: "金融科技",
		},
		{
			imgUrl: "../imgs/api03.svg",
			title: "交通地理",
		},
		{
			imgUrl: "../imgs/api04.svg",
			title: "充值缴费",
		},
		{
			imgUrl: "../imgs/api05.svg",
			title: "数据智能",
		},
		{
			imgUrl: "../imgs/api06.svg",
			title: "企业工商",
		},
		{
			imgUrl: "../imgs/api07.svg",
			title: "应用开发",
		},
		{
			imgUrl: "../imgs/api08.svg",
			title: "电子商务",
		},
		{
			imgUrl: "../imgs/api09.svg",
			title: "吃喝玩乐",
		},
		{
			imgUrl: "../imgs/api10.svg",
			title: "文娱视频",
		},
	];
	// 遍历数组动态渲染
	apiData.forEach(function (v) {
		apihtml += `<li class="bgcfff tcenter b-sh">
		<img src="${v.imgUrl}" alt="" class="mt30b10" />
		<p>${v.title}</p>
		</li>`;
	});
	// 拼接到指定位置
	document.querySelector("#apiList").innerHTML = apihtml;

	// api动态交互效果
	const apiListNode = document.querySelectorAll("#apiList li");
	// console.log(apiListNode);
	apiListNode.forEach(function (v) {
		// 移入
		let apiImgSrc = v.firstElementChild.src;
		v.addEventListener("mouseover", function () {
			console.log(v);
			// console.log(v.firstElementChild.src);
			// http://127.0.0.1:5500/imgs/api01.svg
			v.classList.add("dynamicRendering");

			// console.log(apiImgSrc.lastIndexOf("."));
			let newApiImgSrc = apiImgSrc.slice(0, apiImgSrc.lastIndexOf("."));
			console.log(newApiImgSrc);
			v.firstElementChild.src = newApiImgSrc + `-c.svg`;
		});
		// 移出效果
		v.addEventListener("mouseout", function () {
			v.firstElementChild.src = apiImgSrc;
			v.classList.remove("dynamicRendering");
			v.classList.add("bgcfff");
		});
	});
	// 独角兽区轮播图
	const showArr = $(".show");
	showArr[0].style.opacity = "1";
	let index = 1;
	setInterval(function () {
		showArr.forEach(function (v) {
			v.style.opacity = 0;
		});
		showArr[index].style.opacity = "1";
		index++;
		if (index > showArr.length - 1) {
			index = 0;
		}
	}, 3000);

	//如果.你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
	new Swiper(".swiper");
	var mySwiper = document.querySelector(".swiper").swiper;
	mySwiper.slideNext();
});
